<template>
	<div class="login-main-box">
		<div class="login-box">
			<div class="title">登录信息</div>
			<div class="form-box">
				<div class="input-item-box">
					<div class="input-label">手机号</div>
					<div class="input-box">
						<input type="number" placeholder="请输入您的手机号" maxlength="11" v-model="fromData.mobile">
					</div>
				</div>
				<div class="input-item-box">
					<div class="input-label">验证码</div>
					<div class="input-box">
						<input type="number" placeholder="请输入您的验证码" maxlength="6" v-model="fromData.code">
						<view class="send-code" @click="sendLoginSms">{{ sendSmsText }}</view>
					</div>
				</div>
				<div class="btn submit" @click="login">确认登录</div>
				<div class="btn cancel" @click="cancelLogin">取消</div>

			</div>
		</div>

	</div>
</template>

<script>
	import countDownUtil from "@/utils/countDownUtil"
	import validParamsUtil from "@/utils/validParamsUtil"
	import smsApi from "@/api/smsApi";
	import userApi from "@/api/userApi";
	import messageUtil from "@/utils/messageUtil";

	export default {
		data() {
			return {
				fromData: {
					mobile: '',
					code: '',
				},
				sendSmsText: '获取验证码',
				countDown: 0
			}
		},
		methods: {
			sendLoginSms() {
				console.log(this.fromData.mobile)
				if (!validParamsUtil.validPhone(this.fromData.mobile)) {
					messageUtil.showFail('手机号码格式不正确')
					return;
				}
				if (!countDownUtil.valid(this.countDown)) {
					return;
				}
				messageUtil.showLoading()
				smsApi.sendLoginSms(this.fromData.mobile, res => {
					messageUtil.showSuccess('验证码发送成功')

					this.countDown = 60
					countDownUtil.start(this.countDown, value => {
						this.countDown = value;
						this.sendSmsText = value;
						if (value <= 0) {
							this.sendSmsText = '获取验证码';
						}
					})
				})

			},
			login() {
				if (!validParamsUtil.validPhone(this.fromData.mobile)) {
					messageUtil.showFail('手机号格式不对！')
					return;
				}
				if (this.fromData.code.length == 0) {
					messageUtil.showFail('验证码不能为空！')
					return;
				}
				messageUtil.showLoading('加载中...')

				userApi.login(this.fromData.mobile, this.fromData.code, () => {
					messageUtil.closeLoading()
					messageUtil.showSuccess('登录成功')
					uni.setStorageSync('tel', JSON.parse(JSON.stringify(this.fromData.mobile)))

					this.$emit('loginSuccess')
				})
			},
			cancelLogin() {
				this.$emit('cancelLogin')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: flex-end;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 2;

		.login-box {
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: #faf7f2;
			padding: 30rpx 0;
			width: 100%;

			.title {
				font-size: 35rpx;
				letter-spacing: 1rpx;
				color: #141414;
				text-align: center;
				font-weight: 600;

			}
		}

		.form-box {
			width: 90%;
			margin: 0 auto;

			.input-item-box {
				padding: 30rpx 0;

				.input-label {
					font-family: SourceHanSansSC-Bold;
					font-size: 30rpx;
					letter-spacing: 1rpx;
					color: #141414;
					font-weight: 600;
				}

				.input-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: solid 1rpx #c9c6c1;
					height: 80rpx;

					&>input {
						font-size: 25rpx;
						letter-spacing: 1rpx;
						color: #141414;
						background: none;
						border: none;
						flex-grow: .9;
						height: 70rpx;
					}

					::-webkit-input-placeholder {
						/* WebKit browsers */
						color: #9e9c99;
					}

					::-moz-placeholder {
						/* Mozilla Firefox 19+ */
						color: #9e9c99;
					}

					:-ms-input-placeholder {
						/* Internet Explorer 10+ */
						color: #9e9c99;
					}

					.send-code {
						font-size: 25rpx;
						letter-spacing: 1rpx;
						color: #9e2821;
						text-align: center;

					}
				}
			}

			.btn {
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: 30rpx;
				letter-spacing: 1rpx;
				color: #ffffff;
			}

			.submit {
				background-color: #9e2821;
			}

			.cancel {
				color: #939393;
				background-color: #e4e4e4;
				margin-top: 20rpx;
			}
		}
	}
</style>